<template>
  <div class="app-container">
    <!-- 操作 -->
    <div class="crud">
      <div class="crud-left">
        <el-button v-if="role_list.indexOf('80000060101') != -1" class="fill-btn" @click="handleUpdate(-1, 'create')">添加
        </el-button>
        <el-button v-if="role_list.indexOf('80000060103') != -1" class="plain-btn" @click="handleDelmultip">删除
        </el-button>
        <el-button class="plain-btn reset-btn" @click="resetfilter">重置</el-button>
        <div class="input-box">
          <span class="item-label">所属地区</span>
          <addr-select class="address-select" ref="parent_cascader" select_level="0" @changenode="changeAddr">
          </addr-select>
        </div>
        <div class="input-box">
          <span class="item-label">所属公司</span>
          <el-select class="group-select" v-model="listQuery.groupId" filterable reserve-keyword placeholder="选择公司"
            @change="changeGroup" clearable>
            <el-option v-for="item in list_group" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>

      <!-- <div class="search">
        <el-input v-model="listQuery.keyword" placeholder="查找网点" class="crud-input">
          <el-button class="search-btn" slot="append" icon="el-icon-search" @keyup.enter.native="handleFilter" @click="handleFilter" />
        </el-input>
      </div> -->
    </div>

    <!-- 0 table表格 -->
    <el-form ref="NetworktableFromtableFrom" :model="NetworktableFromtableFrom" :rules="rules">
      <el-table :key="tableKey" v-loading="listLoading" element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading" :data="NetworktableFromtableFrom.list" border fit
        highlight-current-row style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="序号" />

        <el-table-column label="网点名称" min-width="140px" align="center" prop="name">
          <template slot-scope="{ row }">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="网点公司" min-width="130px" align="center" prop="groupId">
          <template slot-scope="{ row }">
            <span>{{ group_name(row.groupId) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="网点地址" min-width="140px" show-overflow-tooltip align="center" prop="address">
          <template slot-scope="{ row }">
            <el-form-item v-if="row.edit_inline" :prop="'list.' + $index + '.address'" :rules="rules.address">
              <el-input v-model="row.address" class="edit-input" size="small" />
            </el-form-item>
            <span v-else>{{ row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人" min-width="100px" align="center" prop="contactMan">
          <template slot-scope="{ row }">
            <el-form-item v-if="row.edit_inline" :prop="'list.' + $index + '.contactMan'" :rules="rules.contactMan">
              <el-input v-model="row.contactMan" class="edit-input" size="small" />
            </el-form-item>
            <span v-else>{{ row.contactMan }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系电话" min-width="130px" align="center" prop="contactNum">
          <template slot-scope="{ row }">
            <el-form-item v-if="row.edit_inline" :prop="'list.' + $index + '.contactNum'" :rules="rules.contactNum">
              <el-input v-model="row.contactNum" class="edit-input" size="small" />
            </el-form-item>
            <span v-else>{{ row.contactNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="通道数" min-width="90" align="center">
          <template slot-scope="{ row }">
            <el-form-item v-if="row.edit_inline">
              <span>{{ row.deviceTotal }}</span>
            </el-form-item>
            <span v-else>{{ row.deviceTotal }}</span>
          </template>
        </el-table-column>
        <el-table-column label="启用网点" class-name="status-col" width="100">
          <template slot-scope="{ row }">
            <!-- <el-switch v-model="row.alive" active-text="启用" inactive-text="禁用"
              :active-value="1" :inactive-value="0" /> -->
            <span>{{ row.alive == 1 ? "启用" : "禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="经度" show-overflow-tooltip width="110" align="center" prop="lng">
          <template slot-scope="{ row }">
            <span>{{ row.lng }}</span>
          </template>
        </el-table-column>
        <el-table-column label="纬度" show-overflow-tooltip width="110" align="center" prop="lat">
          <template slot-scope="{ row }">
            <span >{{ row.lat }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" show-overflow-tooltip width="150" align="center">
          <template slot-scope="{ row }">
            <span >{{ row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" sortable min-width="140px" align="center">
          <template slot-scope="{ row }">
            <span >{{ row.createTime | parseTime("{y}-{m}-{d} {h}:{i}") }}</span>
          </template>
        </el-table-column>
        <el-table-column label="修改时间" min-width="140px" align="center">
          <template slot-scope="{ row }">
            <span >{{ row.updateTime | parseTime("{y}-{m}-{d} {h}:{i}") }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100px" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{ row }">
            <span v-if="role_list.indexOf('80000060102') != -1" class="action action-update"
              @click="handleUpdate(row, 'update')">编辑</span>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <!-- 1 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />

    <!-- 2 添加或修改的弹框 -->
    <el-dialog :title="dialogStatus == 'create'? '添加网点':'修改网点'" :visible.sync="dialogFormVisible" width="60%" :close-on-click-modal="false" center @close="addCancel">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="90px">
        <div class="formitem-container">
          <el-form-item prop="address" v-if="dialogStatus=='create'">
            <span slot="label" class="form-item-label">所属地区</span>
            <addr-select ref="add_address" select_level="1" @changenode="selectAddr"></addr-select>
          </el-form-item>

          <el-form-item prop="name">
            <span slot="label" class="form-item-label">网点名称</span>
            <el-input v-model="temp.name" type="text" maxlength="18" placeholder="网点名称" />
          </el-form-item>

          <el-form-item prop="groupId">
            <span slot="label" class="form-item-label">所属公司</span>
            <el-select v-model="temp.groupId" filterable reserve-keyword placeholder="所属公司" style="width: 100%"
              clearable>
              <el-option v-for="item in list_group2" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
          </el-form-item>

          <el-form-item prop="level">
            <span slot="label" class="form-item-label">等级</span>
            <el-select v-model="temp.level" filterable reserve-keyword placeholder="等级" style="width: 100%" clearable>
              <el-option v-for="item in list_level" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
          </el-form-item>

          <el-form-item prop="address">
            <span slot="label" class="form-item-label">详细地址</span>
            <el-input v-model="temp.address" type="text" maxlength="50" placeholder="详细地址" />
          </el-form-item>

          <el-form-item>
            <span slot="label" class="form-item-label">经度</span>
            <el-input v-model="temp.lng" type="text" maxlength="18" placeholder="经度" />
          </el-form-item>

          <el-form-item>
            <span slot="label" class="form-item-label">纬度</span>
            <el-input v-model="temp.lat" type="text" maxlength="18" placeholder="纬度" />
          </el-form-item>

          <el-form-item prop="contactMan">
            <span slot="label" class="form-item-label">联系人</span>
            <el-input v-model="temp.contactMan" type="text" maxlength="18" placeholder="联系人" />
          </el-form-item>

          <el-form-item prop="contactNum">
            <span slot="label" class="form-item-label">联系电话</span>
            <el-input v-model="temp.contactNum" type="text" maxlength="18" placeholder="联系电话" />
          </el-form-item>

          <el-form-item prop="">
            <span slot="label" class="form-item-label">填写备注</span>
            <el-input v-model="temp.remark" type="text" maxlength="60" placeholder="填写备注" />
          </el-form-item>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button class="plain-dialog-btn" @click="dialogFormVisible = false">取消</el-button>
        <el-button class="fill-dialog-btn" @click="dialogStatus === 'create' ? isRunCreate() : updateData()">确认
        </el-button>
      </div>
    </el-dialog>
    <!-- 3 删除的提示框 -->
    <el-dialog :visible.sync="dialogPvVisible" title="提示" width="30%" center>
      <div class="del-data del-img">
        <img :src="require('../../assets/img/del.png')" alt="" />
      </div>
      <div class="del-data del-notify">确定对网点进行【删除】？</div>
      <span slot="footer" class="dialog-footer">
        <el-button class="plain-dialog-btn" @click="dialogPvVisible = false">取消</el-button>
        <el-button class="fill-dialog-btn" @click="delData">确认</el-button>
      </span>
    </el-dialog>
    <!-- 4 状态更改的提示框 -->
    <el-dialog :visible.sync="dialogToggle" title="提示" width="30%" center>
      <div class="del-data del-img">
        <img :src="require('../../assets/img/remind.png')" alt="" />
      </div>
      <div class="del-data del-notify">确定对状态进行【更改】？</div>
      <span slot="footer" class="dialog-footer">
        <el-button class="plain-dialog-btn" @click="handleCancel(sta_row)">取消</el-button>
        <el-button class="fill-dialog-btn" @click="toggleStatus(sta_row)">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import waves from "@/directive/waves"; // waves directive
  import {
    parseTime
  } from "@/utils"; // 解析时间
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import {
    branchAdd,
    branchDel,
    branchUpdate,
    branchList,
    branchPageList,
    branchSearch,
  } from "@/api/branch";

  import {
    validPass,
    validMobile,
    validlongitude,
    validlatitude,
  } from "@/utils/validate";
  import {
    logger
  } from "runjs/lib/common";
  import AddrSelect from "@/components/Address/AddrSelect";

  const calendarTypeOptions = [{
      key: "CN",
      display_name: "China"
    },
    {
      key: "US",
      display_name: "USA"
    },
    {
      key: "JP",
      display_name: "Japan"
    },
    {
      key: "EU",
      display_name: "Eurozone"
    },
  ];

  // arr to obj, such as { CN : "China", US : "USA" }
  const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name;
    return acc;
  }, {});

  export default {
    name: "BranchSetting",
    components: {
      Pagination,
      AddrSelect
    },
    directives: {
      waves
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "info",
          deleted: "danger",
        };
        return statusMap[status];
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type];
      },
    },
    data() {
      const validatePassword = (rule, value, callback) => {
        // if (!validPass(value) && (value && value.length != 64)) {
        if (!validPass(value)) {
          callback(new Error("8~16位,包含大小写字母和数字, 可以有特殊字符"));
        } else {
          callback();
        }
      };

      // 新校验手机
      const validateMobile = (rule, value, callback) => {
        if (!validMobile(value)) {
          callback(new Error("手机号格式不正确"));
        } else {
          callback();
        }
      };

      // 校验经度
      const validatelongitude = (rule, value, callback) => {
        if (!validlongitude(value)) {
          callback(new Error("经度整数部分应为0~180,小数部分为0~6位"));
        } else {
          callback();
        }
      };

      // 校验纬度
      const validatelatitude = (rule, value, callback) => {
        if (!validlatitude(value)) {
          callback(new Error("纬度整数部分为0-90,小数部分为0~6位"));
        } else {
          callback();
        }
      };

      return {
        NetworktableFromtableFrom: {
          list: [],
        },
        multipleSelection: [],
        is_multip: false, // 是否批量删除
        tableKey: 0,
        // list: null,
        total: 0, // 总条数
        listLoading: false,
        listQuery: {
          page: 1, // 第几页
          limit: 10, // 每页显示的条数row
          keyword: "", // 搜索关键字
          groupId: "", // 公司种类
          node_code: "", // 地区节点id (所选中的各个级别中,  最后级别的id)
          level: "", // node 的等级 (所选中的各个级别中,  最后级别的level)
          province_code: "",
          city_code: "",
          area_code: "",
          street_code: "",
        },
        calendarTypeOptions,
        temp: {
          address: "", // 网点地址
          alive: 1, // 启用
          areaCode: "", // 区域代码
          cityCode: "", // 市代码
          complaintsTel: "", // 投诉电话
          createUserId: "", // 创建者
          enquireTel: "", // 查询电话
          groupId: "", // 分组ID
          id: "",
          lat: "", // 纬度
          level: "", // 等级
          lng: "", // 经度
          name: "", // 网点名称
          pickUpTel: "", // 取件电话
          provinceCode: "", // 省代码
          resId: "", // 资源ID
          serviceTel: "", // 客服电话
          streetCode: "", // 街道代码
          contactNum: "", // 联系电话
          contactMan: "", // 联系人
          deviceTotal: "", // 通道数
          remark: "",
        },
        sta_row: {}, // 修改状态值, 保存当前数据
        dialogFormVisible: false,
        dialogStatus: "",
        del_id: "",
        del_index: null,
        dialogPvVisible: false, // 删除提示框
        dialogToggle: false, // 状态更改的提示框
        run_status: true,
        rules: {
          password: [{
            required: true,
            trigger: "blur",
            validator: validatePassword
          }, ],
          userName: [{
            required: true,
            trigger: "blur",
            validator: validatePassword
          }, ],
          again_pass: [{
            required: true,
            trigger: "blur",
            validator: validatePassword
          }, ],
          // 新校验
          name: [{
            required: true,
            trigger: "blur",
            message: "请填写网点名称"
          }],
          groupId: [{
            required: true,
            trigger: "change",
            message: "请选择所属公司"
          }, ],
          level: [{
            required: true,
            trigger: "change",
            message: "请选择等级"
          }],
          address: [{
            required: true,
            trigger: "blur",
            message: "请填写详细地址"
          }, ],
          lng: [{
            required: true,
            trigger: "blur",
            validator: validatelongitude
          }, ],
          lat: [{
            required: true,
            trigger: "blur",
            validator: validatelatitude
          }],
          contactMan: [{
            required: true,
            trigger: "blur",
            message: "请填写联系人"
          }, ],
          contactNum: [{
            required: true,
            trigger: "blur",
            validator: validateMobile
          }, ],
        },

        list_firm: [{
            id: 1,
            label: "海康"
          },
          {
            id: 2,
            label: "大华"
          },
        ], // 厂商

        list_character: [{
            id: 1,
            label: "UTF-8"
          },
          {
            id: 2,
            label: "GB2312"
          },
          {
            id: 3,
            label: "GBK"
          },
        ], // 字符集
        list_level: [{
            id: 0,
            label: "超级管理员"
          },
          {
            id: 1,
            label: "省级"
          },
          {
            id: 2,
            label: "市级"
          },
          {
            id: 3,
            label: "区/县"
          },
          {
            id: 4,
            label: "街道"
          },
        ], // 网点的等级
        list_group: [{id: "", label: "全部"}, {id: '11', label: "邮政"}, {id: '12', label: "圆通"}, { id: '13', label: "申通"}, { id: '14', label: "中通"}, { id: '15', label: "韵达"}, { id: '16', label: "顺丰"}],   // 所属公司
        list_group2: [{id: '11', label: "邮政"}, {id: '12', label: "圆通"}, { id: '13', label: "申通"}, { id: '14', label: "中通"}, { id: '15', label: "韵达"}, { id: '16', label: "顺丰"}],   // 所属公司
        
       

        password_type_reg: "password",
        password_type_reg2: "password",
        reg_tooltip: false, // 大写 ?
        reg2_tooltip: false, // 大写 ?
        role_list: [], // 按钮权限
      };
    },
    watch: {},
    created() {
      this.getList();
    },
    mounted() {
      this.role_list = this.$store.getters.menu_code_list;
    },
    computed: {
      group_name() {
        return (groupId) => {
          if (groupId == 11) return "邮政";
          else if (groupId == 12) return "圆通";
          else if (groupId == 13) return "申通";
          else if (groupId == 14) return "中通";
          else if (groupId == 15) return "韵达";
          else if (groupId == 16) return "顺丰";
        };
      },
    },
    methods: {
      // 重置功能
      resetfilter() {
        (this.listQuery = {
          page: 1,
          limit: 10,
          keyword: "",
          groupId: "",
          node_code: "",
          level: "",
          province_code: "",
          city_code: "",
          area_code: "",
          street_code: "",
        }),
        this.$refs["parent_cascader"].clearNodes();
        this.getList();
      },
      // 获取 table 列表
      getList() {
        this.listLoading = true;
        let temp_query = {
          pageNo: this.listQuery.page,
          pageSize: this.listQuery.limit,
          searchInfo: this.listQuery.keyword,
          groupId: this.listQuery.groupId,
        };
        if (this.listQuery.level == 1)
          temp_query.provinceCode = this.listQuery.province_code;
        else if (this.listQuery.level == 2)
          temp_query.cityCode = this.listQuery.city_code;
        else if (this.listQuery.level == 3)
          temp_query.areaCode = this.listQuery.area_code;
        else if (this.listQuery.level == 4)
          temp_query.streetCode = this.listQuery.street_code;

        branchPageList(temp_query)
          .then((res) => {
            if (res.code == 0) {
              this.NetworktableFromtableFrom.list = res.list;
              this.total = parseInt(res.total);

              this.NetworktableFromtableFrom.list =
                this.NetworktableFromtableFrom.list.map((item, i) => {
                  this.$set(item, "edit_inline", false);
                  item.original_name = item.name;
                  item.original_groupId = item.groupId;
                  item.original_address = item.address;
                  item.original_lng = item.lng;
                  item.original_lat = item.lat;
                  item.original_alive = item.alive;
                  // item.original_deviceTotal = item.deviceTotal
                  item.original_contactMan = item.contactMan;
                  item.original_contactNum = item.contactNum;
                  item.original_level = item.level;
                  return item;
                });

              setTimeout(() => {
                this.listLoading = false;
              }, 1 * 900);
            } else {
              this.$message({
                message: "请求失败",
                type: "error",
              });
            }
          })
          .catch((res) => {
            this.listLoading = false;
          });
      },

      // 取消状态编辑
      cancelEditLine(row) {
        row.alive = row.original_alive;
        this.$message({
          message: "已经取消更改",
          type: "warning",
        });
      },

      // 点击了 状态值切换==========================
      changeStatus(row) {
        this.dialogToggle = true;
        this.sta_row = row;
      },
      // 确认了  状态值切换
      toggleStatus(row) {
        branchUpdate(row)
          .then((res) => {
            this.$notify({
              title: "成功",
              message: "状态修改成功",
              type: "success",
              duration: 4000,
            });
            this.dialogToggle = false;
          })
          .catch((res) => {
            this.$message({
              message: "网络错误",
              type: "error",
            });
          });
      },
      // 取消状态管理
      handleCancel(row) {
        this.dialogToggle = false;
      },


      // 点击 关闭 dialog弹出框
      addCancel() {
        this.$refs["add_address"].clearNodes();
      },

      // 点击了 '编辑' 或添加======================================================
      handleUpdate(row, str) {
        if (str == "create") this.resetTemp(); // 清空
        if (str == "update") {
          this.temp = Object.assign({}, row); // 克隆一个对象
        }
        this.dialogStatus = str;

        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
      },
      // 编辑: 确认更新数据
      updateData() {
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            branchUpdate(this.temp).then((res) => {
              if(res.code == 0) {
                  // const index = this.list.findIndex(v => v.id === this.temp.id) // 找到被更改的item下标
                  // this.list.splice(index, 1, this.temp) // 通过下标更改list的数据

                  this.getList();
                  this.dialogFormVisible = false;
                  this.$notify({
                    title: "成功",
                    message: "更新成功",
                    type: "success",
                    duration: 4000,
                  })
                } 
                else {
                  this.$message({
                    message: "更改失败",
                    type: "error",
                  });
                }
            });
          } 
          else {
            return false;
          }
        });
      },

      isRunCreate() {
        if (this.run_status) {
          this.run_status = false
          this.createData()
          setTimeout(() => {
            this.run_status = true
          }, 999)
        }
      },
      // 确认添加
      createData() {
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            branchAdd(this.temp)
              .then((res) => {
                if (res.code == 0) {
                  // this.list.unshift(this.temp)
                  this.getList();
                  // this.$refs['add_address'].clearNodes()
                  this.dialogFormVisible = false;
                  this.$notify({
                    title: "成功",
                    message: "创建成功",
                    type: "success",
                    duration: 4000,
                  });
                } else {
                  this.$message({
                    message: "添加失败",
                    type: "error",
                  });
                }
              })
              .catch((res) => {
                this.$message({
                  message: "网络错误",
                  type: "error",
                });
              });
          } else {
            return false;
          }
        });
      },
      // 清空temp
      resetTemp() {
        this.temp = {
          address: "", // 网点地址
          alive: 1, // 启用
          areaCode: "", // 区域代码
          cityCode: "", // 市代码
          complaintsTel: "", // 投诉电话
          createUserId: "", // 创建者
          enquireTel: "", // 查询电话
          groupId: "", // 分组ID
          id: "",
          lat: "", // 纬度
          level: "", // 等级
          lng: "", // 经度
          name: "", // 网点名称
          pickUpTel: "", // 取件电话
          provinceCode: "", // 省代码
          resId: "", // 资源ID
          serviceTel: "", // 客服电话
          streetCode: "", // 街道代码
          contactNum: "", // 联系电话
          contactMan: "", // 联系人
          deviceTotal: "", // 通道数
          remark: "",
        };
      },
      // 点击了删除===============================================
      handleDelete(row, index) {
        this.is_multip = false;
        this.del_id = row.id;
        this.del_index = index;
        this.dialogPvVisible = true;
      },
      // 点击了 批量删除
      handleDelmultip() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            message: "没有被选项!",
            type: "error",
            duration: 4000,
            showClose: true,
            center: true,
          });
        } else {
          this.is_multip = true;
          this.dialogPvVisible = true;
        }
      },
      // 确认了删除
      delData() {
        let ids = [];
        if (this.is_multip) {
          // 批量删
          this.multipleSelection.forEach((item, i) => {
            ids.push(item.id);
          });
        } else {
          ids = [this.del_id];
        }
        branchDel(ids).then(() => {
          this.dialogPvVisible = false;
          // this.list.splice(this.del_index, 1)
          this.getList();
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 4000,
          });
        });
      },

      // 添加网点选择地区
      selectAddr(cut_node, cut_level, newval) {
        // console.log(newval)
        // console.log(cut_node);
        // console.log(cut_level);
        [
          this.temp.provinceCode,
          this.temp.cityCode,
          this.temp.areaCode,
          this.temp.streetCode,
        ] = newval;
      },

      // 筛选条件的切换 (地区切换)
      changeAddr(cut_node, cut_level, newval) {
        console.log(newval);
        if (cut_level == 1) {
          this.listQuery.province_code = cut_node;
          this.listQuery.level = cut_level;
        } else if (cut_level == 2) {
          this.listQuery.city_code = cut_node;
          this.listQuery.level = cut_level;
        } else if (cut_level == 3) {
          this.listQuery.area_code = cut_node;
          this.listQuery.level = cut_level;
        } else if (cut_level == 4) {
          this.listQuery.street_code = cut_node;
          this.listQuery.level = cut_level;
        }
        this.getList();
      },
      // 筛选条件的切换 (公司切换)
      changeGroup() {
        this.getList();
      },

      // 搜索
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      // 批量选择
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    },
  };
</script>

<style lang="scss">
  @import "~@/styles/variables.scss";

  .crud {
    // .el-input-group__append {
    //   color: $my_primary;
    //   border: 0;
    //   border-left: 1px solid $my_primary;

    //   .el-button {
    //     // height: 27px;
    //     // border: 1px solid $my_primary !important;
    //     // background-color: #f11;
    //   }
    // }
  }

  .el-dialog {
    .el-dialog__header {
      background-color: #f5f7f5 !important;
    }
  }

  .formitem-container {
    // background-color: #f99;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .el-form-item {
      // background-color: aqua;
      width: 48%;
    }
  }

  .el-form-item__label {
    // 两端对齐
    display: flex;
    justify-content: space-between;
    align-items: center !important;

    &::before {
      transform: translateY(3px);
    }

    .form-item-label {
      flex: 1;
      text-align-last: justify !important;
      text-align: justify !important;
    }
  }
</style>


<style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  .app-container {
    padding: 10px;
    background-color: #ffffff;

    .crud {
      margin-bottom: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .crud-left {
        // background-color: #faa;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .reset-btn {
          margin-right: 15px;
        }
      }
    }

    // background-color: #f99 !important;
    .el-table {
      .action {
        font-size: 13px;
        color: var(--app_primary) !important;
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .el-dialog {
      .del-data {
        text-align: center;
        margin-bottom: 16px;

        img {
          width: 130px;
          height: 110px;
        }
      }

      .del-img {}
    }
  }
</style>
